<script lang="ts" setup>
import { computed, ref } from "vue";
import Preview from "./components/preview.vue";
import Base from "./components/base.vue";
import SubjectBannerSetting from "./components/subject-banner/setting.vue";
import SubjectSetting from "./components/subject/setting.vue";
import StoreSetting from "./components/store/setting.vue";
import ActivityDetailSetting from "./components/activity-detail/setting.vue";
import GroupBuySetting from "./components/group-buy/setting.vue";
import ReportSetting from "./components/report/setting.vue";
import SignUpSetting from "./components/sign-up/setting.vue";
import AdvancedSetting from "./components/advanced.vue";
import ShareSetting from "./components/share.vue";
import DistributionSetting from "./components/distribution.vue";
import MusicSetting from "./components/music.vue";

const components = ref([
  {
    key: "SubjectBanner",
    title: "头图设置",
  },
  {
    key: "Subject",
    title: "活动主题",
  },
  {
    key: "CountDown",
    title: "限时抢购",
  },
  {
    key: "GroupBuy",
    title: "拼团商品",
  },
  {
    key: "Store",
    title: "门店信息",
  },
  {
    key: "Report",
    title: "活动数据",
  },
  {
    key: "ActivityDetail",
    title: "活动详情",
  },
  {
    key: "NewestPurchase",
    title: "最新购买",
  },
  {
    key: "SignUp",
    title: "报名信息",
  },
]);
const selectedKey = ref("Base");

const title = computed(() => {
  return components.value.find((item) => item.key === selectedKey.value)?.title;
});

function handleSelect(key: string) {
  selectedKey.value = key;
}

function getColor(keys: string[]) {
  return keys.includes(selectedKey.value) ? "#007bff" : "";
}
</script>

<template id="e3a8ddf6-f9dc-4e1d-b36e-e410ebf48d68">
  <umi-layout id="68831fcf-73d1-4f7e-b5a3-a7cf19da12d6" style="background-color: #fff">
    <umi-layout-header id="f3e998b3-b31b-4080-8fc4-5a24e086bdf3" style="border-bottom: 1px solid #dcdfe6">
      <umi-container id="37275821-666d-4883-ad6a-b8666a810c60" direction="horizontal" justify="between" padding="0 32px" align="center" height="100%">
        <umi-space id="0ef3f24d-a9f5-4233-9866-dfdd034cbc0b" :size="6" align="center" @click="$router.back()">
          <umi-icon id="a41993be-cef9-4856-8050-2fe5894d15f7" name="arrow-left"></umi-icon>
          <umi-text id="e5ddfe48-a7f8-4a76-ac00-6b78f57e43cd">退出编辑</umi-text>
        </umi-space>
        <umi-space id="6b981df7-9c47-4fc4-a554-8b9b4dd8f0cd" :size="10">
          <umi-button id="62b39c68-a702-458f-8f84-a09b69e9dd48" type="primary">保存</umi-button>
          <umi-button id="e74e3a63-9a63-4962-8b36-3a59c3a1f8c4" type="primary">保存并返回列表</umi-button>
        </umi-space>
      </umi-container>
    </umi-layout-header>
    <umi-layout id="442037f8-4be1-4731-993c-39362aa95533" height="calc(100vh - 64px)">
      <umi-layout-sider id="2db65728-d7fe-4fc6-8ac9-3ec246845213" :width="200" style="border-right: 1px solid #dcdfe6; overflow: auto">
        <umi-container id="5b08ca96-19fb-4225-9818-971872b2c16c" padding="10px" :gap="16">
          <Preview id="7555b41e-6b26-40f4-80ca-c144ec221a98" :selected-key="selectedKey" :key="component.key" v-for="component in components" @click="handleSelect(component.key)">{{
            component.title
          }}</Preview>
        </umi-container>
      </umi-layout-sider>
      <umi-layout-content id="02cef21b-65bb-439c-9842-1e03d52d48ba" style="overflow: auto">
        <umi-container id="4a0b7dd7-71e3-46ec-b715-096828ae034c" justify="start" padding="16px 0" align="center" min-height="100%" bg-color="#f2f2f2">
          <umi-action-overlay id="f94efd63-43d0-48c6-8495-79cc469054ae" :key="component.key" v-for="component in components">
            <umi-image id="cd725c5e-c71c-464a-80e9-39d0fd8d08e3" :width="390" :height="500"></umi-image>
            <template id="61917ec9-69f3-476c-8c23-e63061fc3622" #body>
              <umi-container id="a48be0a0-bd56-48a1-b7e1-0e4b7a650abb" justify="center" align="center" height="100%">
                <umi-button id="f784327d-620a-498f-805f-199868516091" type="primary" shape="round" @click="handleSelect(component.key)">点击编辑</umi-button>
              </umi-container>
            </template>
          </umi-action-overlay>
        </umi-container>
      </umi-layout-content>
      <umi-layout-sider id="ecba0e2d-ec1e-4549-b5a2-6938f8d9ee2d" :width="600">
        <umi-row id="4e6540eb-de49-41f5-90c2-50a3ea50f6ea" style="height: 100%">
          <umi-col id="0abdb4cc-a3b4-4289-a202-e3569b768f0f" :span="3" style="border-right: 1px solid #dcdfe6; border-left: 1px solid #dcdfe6">
            <umi-container id="656c7222-88fa-43f3-b05e-62cc2d7f9d7e" padding="24px 6px" :gap="32">
              <umi-text-icon id="a038e8ad-3b74-41c4-bd22-b90f42965db6" :color="getColor(['Base', 'CountDown'])" :icon-props="{ name: 'order', size: 20 }" :pointer="true" @click="handleSelect('Base')"
                >基础</umi-text-icon
              >
              <umi-text-icon id="a8781a0c-f87f-4b9c-a086-23bf1e4715c6" :color="getColor(['Advanced'])" :iconProps="{ name: 'order', size: 20 }" :pointer="true" @click="handleSelect('Advanced')"
                >高级</umi-text-icon
              >
              <umi-text-icon id="a7d0e476-1f97-49db-a1cc-8963b1eab948" :iconProps="{ name: 'order', size: 20 }" :pointer="true">商品</umi-text-icon>
              <umi-text-icon :color="getColor(['Distribution'])" :iconProps="{ name: 'order', size: 20 }" :pointer="true" @click="handleSelect('Distribution')">分销</umi-text-icon>
              <umi-text-icon id="e4820f9f-d93b-4cc3-942f-012c5ab26fbc" :color="getColor(['Music'])" :iconProps="{ name: 'order', size: 20 }" :pointer="true" @click="handleSelect('Music')"
                >音乐</umi-text-icon
              >
              <umi-text-icon id="a2bef3fb-a883-4dfa-abcb-4da3df9fb01b" :color="getColor(['Share'])" :iconProps="{ name: 'order', size: 20 }" :pointer="true" @click="handleSelect('Share')"
                >分享</umi-text-icon
              >
              <umi-divider id="9f1bd038-bdad-4558-804a-201d0926b3ea" padding="0" v-if="title"></umi-divider>
              <umi-text-icon
                id="c06b2da4-dae5-4c86-a9fb-295835a7f136"
                :iconProps="{ name: 'order', size: 20 }"
                :pointer="true"
                :color="getColor(['SignUp', 'Report', 'GroupBuy', 'SubjectBanner', 'Subject', 'Store', 'ActivityDetail'])"
                v-if="title"
                >{{ title }}</umi-text-icon
              >
            </umi-container>
          </umi-col>
          <umi-col id="0d2dad73-d998-44eb-aea2-0d9ea0591de7" :span="21">
            <umi-container id="962d01bc-294f-410a-9a0f-5b6400c38c8b" padding="16px">
              <Base id="37231035-cd9d-4a37-ba3d-477f92a658e2" v-if="['Base', 'CountDown'].includes(selectedKey)"></Base>
              <AdvancedSetting v-if="selectedKey === 'Advanced'"></AdvancedSetting>
              <ShareSetting v-if="selectedKey === 'Share'"></ShareSetting>
              <MusicSetting v-if="selectedKey === 'Music'"></MusicSetting>
              <DistributionSetting v-if="selectedKey === 'Distribution'"></DistributionSetting>
              <SubjectBannerSetting id="ded4ad56-6ddd-44dd-aa6c-7e140fbfdc7c" v-if="selectedKey === 'SubjectBanner'"></SubjectBannerSetting>
              <SubjectSetting id="980b20a2-bf10-4e2e-8452-c2770c720f83" v-if="selectedKey === 'Subject'"></SubjectSetting>
              <StoreSetting id="89e0db75-bbb0-4ffa-85e8-b3bbd9c2b447" v-if="selectedKey === 'Store'"></StoreSetting>
              <ActivityDetailSetting id="121323d0-79b6-4755-949d-ba9bcc5ce1ff" v-if="selectedKey === 'ActivityDetail'"></ActivityDetailSetting>
              <GroupBuySetting id="815093b2-d14a-4a6a-b45b-7d0caf14a567" v-if="selectedKey === 'GroupBuy'"></GroupBuySetting>
              <ReportSetting id="698da80a-cda6-4c53-ac25-0f20a002fd8b" v-if="selectedKey === 'Report'"></ReportSetting>
              <SignUpSetting id="a9d12078-2eca-47d1-8057-0f068f79bad2" v-if="selectedKey === 'SignUp'"></SignUpSetting>
            </umi-container>
          </umi-col>
        </umi-row>
      </umi-layout-sider>
    </umi-layout>
  </umi-layout>
</template>
